
		<style >
			@import '../../../static/z39pc/css/mycss/market.css';

			@import '../../../static/z39pc/fonts/iconfont.css';
			@import '../../../static/z39pc/css/masonry.css';
			@import '../../../static/z39pc/css/swiper-3.4.2.min.css';

			.sort-container {
				position: relative;
				top: 70px;
				left: 10px;
				margin-bottom: 10px;
			}
			.nav-category {
				margin-top: 0px;
		    padding-top: 0px;
		    padding-right: 36px;
		    height: 40px;
		    clear: left;
			}
			.nav-category .item, .nav-category .item-m{
				display: inline-block;
				padding: 5px 10px;
		    font-size: 14px;
		    float: left;
		    vertical-align: middle;
			}
			.nav-category .item-m {
				font-weight: 600;
			}
			.nav-category .active{
			  background: rgba(0,169,255,.24);
    		border-radius: 6px;
			}
			.nav-category a {
			  color: rgb(51,51,51);
			  text-decoration: none;
			}
			.task-tag-proj:focus {
				color: #00F;
			}
		</style>

	<template>
		<div class="market-main-container">
		<div id="nTalk_post_hiddenElement" style="left: -10px; top: -10px; visibility: hidden; display: none; width: 1px; height: 1px;"></div>

		<header-nav></header-nav>
		<div class="sort-container" style="display:none">
			<div class="nav-category" v-for="(cat,index1) in menuSortList">
				<span class="item-m">{{ cat[0].name }}</span>
				<span :class="{item: true, active: it.selected}" v-for="(it,index2) in cat" :data-key="it.key" :data-index1="index1" :data-index2="index2" v-if="it.key!==undefined" @click="itemClicked(index1,index2)"><a href="javascript:void(0)">{{ it.name }}</a></span>
			</div>
		</div>
		<div class="slider">
			<div class="swiper-container" id="slider">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(cat,index1) in menuSortList" style="text-align:left;overflow-y:scroll">
							<span class="mar-r-10 task-title">{{cat[0].name}}</span>
							<i v-for="(it,index2) in cat" class="task-tag" v-if="it.key!==undefined" :data-key="it.key" :class="{active: it.selected}" @click="itemClicked(index1,index2)">
			        		{{it.name}}
			        	</i>
						</div>
						<div class="swiper-slide" style="text-align:left;overflow-y:scroll">
							<span class="mar-r-10 task-title">项目:</span>
							<i v-for="(item,index) in projects" class="task-tag task-tag-proj" :class="{active: item.selected}" :title="item.desc || item.title" @click="projClicked(index)">
								{{item.title.length <= 4 ? item.title : item.title.substr(0,3) + '..'}}
							</i>
						</div>
					</div>
			</div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>

		<div id="mainContent" style="background: none;">
			<masonry :task-list="tasks" :more-task-list="moreTasks" :qparams="qparams"></masonry>
		</div>
		</div>
		</template>
		<script>
			import api from '../../api';
			import menuSort from "./menu_sort" ;
			import headerNav from '../../components/all/header.vue'
			import '../../../static/z39pc/js/jquery-2.1.0.js'
			import swiper from 'swiper';
			import masonry from '../../components/market/masonry.vue';
			import _ from 'underscore';

			let menuList = menuSort.basemenu;
			let menuSelect = [];
			for(var i=0;i<menuList.length; i++) {
				for(var j=0;j<menuList[i].length; j++) {
					menuList[i][j].selected = false;
				}
				menuSelect[i] = "";
			}

			menuList[0][6].selected = true;
			menuList[1][1].selected = true;
			menuList[2][1].selected = true;
			menuList[3][1].selected = true;

			menuSelect[0] = menuList[0][6].key;
			let m = ((new Date()).getMonth()+1) + "月";
			for(var j=0; j<menuList[4].length; j++) {
				if (menuList[4][j].name == m) {
					menuList[4][j].selected = true;
					menuSelect[4] = menuList[4][j].key;
					break;
				}
			}

			let keyNameDic = {};

			var initSlider = function() {
				$('body').css({
					'height':'auto',
					'overflow-y':'scroll',
					'font-size':'62.5%'
				})
				var appendNumber = 4;
				var prependNumber = 1;
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					slidesPerView: 6,
					keyboardControl: true,
					mousewheelControl: true,
					grapCursor: true,
					//			        centeredSlides: true,
					paginationClickable: true,
					spaceBetween: 10,
				});
			}
			var initPage=function(){
				return;
				$('body').on('click','.swiper-container .task-tag-proj',function(){
					$(this).toggleClass('active');
				});
			};
			export default{
				components:{
		    		'masonry':masonry,
		    		'header-nav':headerNav
				},
				data(){
					return{
						menuSortList: menuList,
						projects: [],
						tasks: [],
						moreTasks: [],
						pageIndex: 1,
						pageShowNum: 0,
						pageTotal: 1,
						qparams: '',
						isLogin: false
					}
				},
				methods:{
					checkLogin:function(){
						var that = this;
		        api.checkLogin({}).then(data=>{
	            if(data.errno!=0){
	            	this.$store.commit({ type: "reset" });
	            	localStorage.removeItem('timeUserInfo');
	            	localStorage.removeItem('tagTmpSortArr');
	            	this.timeUserInfo='';
	            } else {
	            	api.tagsrec().then(data => {
					        if(data.errno !=0) return ;
					          data = data.data;
					          data.forEach(function(v,i){
					          	data[i].selected = false;
					          });
					          data.unshift({key:"",name:"全部", selected: false});
					          data.unshift({name:"常用:", selected: true});
					          that.menuSortList.push(data);
					      });
	            	this.getTasks();
								this.getProjects();
	            }
		        });
		      },
					creatDate: function() {
						var tags = []
						for(var i = 1; i < 10; i++) {
							if(i<8){
								tags.push('标签'+i*2)
							}

							this.sliderList.push({
								title: '项目' + i,
								tags: tags
							})
						}
						this.$nextTick(function(){
							initSlider()
						});
					},
					itemClicked(index1, index2) {
						var mList = this.menuSortList;
						var itemList = mList[index1];
						itemList.forEach(function(v,i){
							itemList[i].selected = false;
						});
						itemList[index2].selected = true;
						mList[index1] = itemList;
						this.menuSortList = mList;
						menuSelect[index1] = itemList[index2].key;

						this.getTasks(undefined, 0);
					},
					projClicked(index) {
						console.log(index + " clicked");
						var projects = this.projects;
						var curIndex = -1;
						projects.forEach(function(v,i){
							if (projects[i].selected == true) {
								projects[i].selected = false;
								curIndex = i;
							}
						});
						var pid = 0;
						if (curIndex == -1 || index != curIndex) {
							projects[index].selected = true;
							pid = projects[index].id || 0;
						}
						this.projects = projects;
						this.getTasks(undefined, pid);
					},
					getTasks(item, pid){
	          item = item || {} ;
	          var state,key,month ;
	          let data = {};
	          let tags={} ;
	          for(var index in menuSelect){
	            key = menuSelect[index];
	            switch(index){
	              case "0":
	                if(key) {
	                  data.state =key ;
	                }
	                break;
	              case "1":
	                if(key) tags[key] = "" ;
	                break;
	              case "2":
	                if(key) {
	                  data.timeDiff = key ;
	                  data.sql = true ;
	                }
	                break;
	              case "3":
	                if(key) {
	                  data.need = key ; //需要完善修改逻辑
	                  data.sql = true ;
	                }
	                break;
	              case "4":
	                if(key)tags.due = key ;

	                break;
	              case "5": // 常用
	                if(key) tags[key] = "" ;
	                break;
	              case "6":
	                if(item.id) data.pid = item.id ;
	                break;
	              default :
	                console.log("default:",index,key);
	            }
	          }
	          var p="";
	          var params = "";
	          var paramsTags = "";
	          var tagValue,keyValue ;
	          var selectedTxt = "";
	          var temp;
	          for(var key in data){
	            keyValue = data[key];
	            params += (params?"&":"")+ `${key}=${keyValue}` ;
	            temp = keyNameDic[keyValue];
	            if(keyValue && temp ) selectedTxt += (selectedTxt?" • ":"")+ temp ;
	          }
	          for(var tagKey in tags){
	            tagValue = tags[tagKey] ;
	            paramsTags+= (paramsTags?",":"")+tagKey + (tagValue?`:${tagValue}`:"");
	            temp = keyNameDic[tagKey] || keyNameDic[tagValue];
	            if(tagKey && temp) selectedTxt += (selectedTxt?" • ":"")+ temp;
	          }
	          if(paramsTags) data.key = paramsTags ;
	          selectedTxt = selectedTxt || "全部";
	          this.selectedLabel = selectedTxt ;
	          if (pid) {
	          	data.pid = pid;
	          }
	          // var match= str.match(/\!\[.{0,}\]\((.*\.png.{0,}?)\)/)  ; if(match) img = match[1]

	          api.tasksGet(data).then(data => {
	          	console.log("获取任务:");console.log(data);
	            if(data.errno!=0) return this.$message.info(data.errmsg);
	            var tasks = data.data.tasks || data.tasks || [];
	            var L = Math.min(tasks.length, 15);
	            var s = '```video\
							 <video id="my-video" class="video-js" controls preload="auto" width="100%" poster="\http://\cdn.7dtime.com/\time_tlog/2018-01-30_4330414x738.jpg" data-setup=\'{"aspectRatio":"16:9"}\'>\
							  <source src="http://cdn.7dtime.com/time_tlog/2018-01-30_4330414x738.mp4" type="video/mp4" >\
							  <p class="vjs-no-js">\
							  To view this video please enable JavaScript, and consider upgrading to a web browser that \
							  <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>\
							 </video>\
							 ```';
							var imgrule = /\!\[.{0,}\]\((.*\.(png|jpg|jpeg)(\?.+)?)\)/;
	          	var videorule = /\s*```video\s*(<video [^`]+<\/video>)/m;
	            for(var i=0; i<Math.min(tasks.length, L); i++) {
	            	/*if (i == 0) {
	            		tasks[i].desc = s;
	            	}*/
	            	if (tasks[i].desc) {
	            		var match = tasks[i].desc.match(videorule);
	            		if (match) {
	            			tasks[i].video = match[1];
	            			//tasks[i].desc = tasks[i].desc.replace(match[1], "");
	            		}
	            		match = tasks[i].desc.match(imgrule);
	            		if (match) {
	            			tasks[i].img = match[1];
	            		}
	            		tasks[i].desc = _.escape(tasks[i].desc);
	            	} else {
	            		tasks.splice(i, 1);
	            		i--;
	            	}
	            }
	            this.tasks = tasks.slice(0, L);
	            this.moreTasks = tasks.slice(L);

	            this.pageIndex = 1;
	            this.pageShowNum = this.pageIndex * this.pageNumOne ;
	            this.pageTotal = tasks.length / this.pageNumOne ;
	          });
	         	this.qparams = data;
	      	},
	      	getProjects(params) {
	      		api.projects(params).then(data => {
	      			var projects = data.data || [];
	      			projects.forEach(function(v, i){
	      				projects[i].selected = false;
	      			});
	      			this.projects = projects;

	      			this.$nextTick(function(){
								initSlider()
							});

	      			console.log("获取项目:");
	      			console.log(data);
	      		});
	      	}
				},
				mounted() {
					keyNameDic["done"] = "完成" ;
          keyNameDic["b"] = m;

          var that = this;
          this.checkLogin();
				}
			}
		</script>
